@import "~@/mixin.less";

.page {
  width: 100%;
  overflow-x: hidden;
  margin-right: auto;
  margin-left: auto;
}

.watchFlexy {
  @margin: 24px;
  display: flex;
  flex-direction: row;
  margin-left: @margin;
  .mobile({
    margin-left: 0;
  });

  .primary {
    flex: 1 1;

    .primaryInner {
      padding-top: @margin;
      padding-right: @margin;
      .mobile({
        padding-top: 0;
        padding-right: 0;
      });

      .playerContainer {
        //height: 678px;
        .mobile({
          padding-right: 0;
        });

        .player {
          background-color: #f7f7f7;
          width: 100%;
          height: 100%;
        }
      }

      .info {
        margin-top: 10px;
        text-align: left;
        color: @fontColor;
        .mobile({
          padding: 0 5px;
        });

        .title {
          word-break: break-word;
          overflow: hidden;
          font-weight: 400;
          line-height: 1.4rem;
          font-size: 1.2rem;
        }

        .meta {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;

          .videoViewer {
            color: @fontColor;
            text-align: right;
          }
        }
      }
    }
  }

  .secondary {
    padding-top: @margin;
    padding-right: @margin;
    width: 400px;
    .mobile({
      display: none;
    });


    .secondaryInner {
      background-color: #f7f7f7;
      width: 100%;
      height: 100%;
    }
  }
}

